<template>
  <div class="img-mouse">
    <img src="./grid.png" alt="" width="400" usemap="#gridMap">
    <map name="gridMap" id="gridMap">
      <area @mousemove="mousemove" shape="poly" :coords="coords" href="" alt="">
    </map>
  </div>
</template>

<script>
/*
* 必须要使用 img 结合 usemap 执行 map 标签
* 下面的就是该在该图片中的像素点位，可以用 ps 软件得出
* */
export default {
  data() {
    return {
      // 即在图片的该位置会触发
      coords: [1, 1, 1, 100, 100, 1, 100, 100].toString()
    }
  },
  methods: {
    mousemove() {
      this.$message.success('111')
    }
  }
}
</script>

<style scoped lang="scss">
.img-mouse {

}
</style>